<template>
	<view>
		<view class="header status_bar" :class="scrrol == true ? 'scrrolHeader' : ''">
			<view class="back iconfont icon-xiangzuo1" @tap="backPage"></view>
			<view class="text" :class="scrrol == true ? 'scrrolHeader' : ''">我的朋友圈</view>
		</view>
		<view class="search_maxbox" :class="scrrol == true ? 'scrrolHeader02' : ''">
			<view class="search_box">
				<view class="search">
					<view class="icon iconfont icon-sousuo"></view>
					<input type="text" v-model="keyword" value="" placeholder="搜索关键字" />
					<view class="menu" @click="search">搜索</view>
				</view>
			</view>
		</view>
		<view class="clear_box"></view>
		<view class="clear_box02"></view>

		<!-- <scroll-view class="scroll_box" scroll-y="true" @scrolltolower="lower"> -->
			<block v-for="(item,index) in info">
				<view class="circle_list">
					<view class="circle_value">
						<!-- <view class="type">置顶</view> -->
						<view class="value" v-bind:selectable="true" @longpress="onLongPress(item.content)">{{item.content}}</view>
					</view>
					<view class="circle_picture" v-if="item.thumb && item.thumb.length > 1">
						<block v-for="(item_0,index_0) in item.thumb" :key="index">
							<view class="picture" v-if="index_0 < 2">
								<image class="image" :src="item_0" mode="aspectFill" @tap.stop="openPreviewImage(item.thumb,index_0)"></image>
							</view>
							<view class="picture_2" v-if="index_0 == 2 && item.thumb.length > 3">
								<image class="image" :src="item_0" mode="aspectFill" @tap.stop="openPreviewImage(item.thumb,index_0)"></image>
								<text class="count">+{{ item.thumb.length - 3 }}</text>
							</view>	
							<view class="picture" v-if="index_0 == 2 && item.thumb.length <= 3">
								<image class="image" :src="item_0" mode="aspectFill" @tap.stop="openPreviewImage(item.thumb,index_0)"></image>
							</view>	
						</block>
					</view>
					<view class="circle_picture" v-if="item.thumb && item.thumb.length < 2" :style="{ width: '30% !important'}">
						<block v-for="(item_0,index_0) in item.thumb" :key="index">
							<view class="picture">
								<image class="image" :src="item_0" mode="aspectFill" @tap.stop="openPreviewImage(item.thumb,index_0)"></image>
							</view>
						</block>
					</view>
					<view class="circle_other">
						<view class="time">{{item.time}}</view>
						<view class="icon_box">
							<view class="off_but" :data-url="'/pages/circle/publish_edit?id='+item.id" @click="gotopage">
								<view class="t">编辑</view>
							</view>
							<view class="off_but" @tap="del_car(item.id)">
								<view class="t">删除</view>
							</view>
						</view>
					</view>
				</view>
			</block>
			<block v-if="empty_show">
				<view style="height: 10vh;padding-top: 5vw;text-align: center;">
					<u-empty text="没有更多了" mode="list">没有更多了</u-empty>
				</view>
			</block>
		<!-- </scroll-view> -->

	</view>
</template>

<script>
	import simpleAddress from '@/components/simple-address/simple-address.vue';
	export default {
		data() {
			return {
				page: 1,
				scrrol: false,
				info: '',
				empty_show:0,
				is_vip:0,
				is_sync:0,
				keyword: '',
				is_load:0,
				brand_id:0,
				brand_name:'车型',
				notice:[],
				year:'年款',
				year_list:[
					'2024','2023','2022','2021','2020','2019','2018','2017','2016','2015','2014','2013','2012','2011','2010','2009','2008','2007','2006','2005',
					'2004','2003','2002','2001','2000','1999','1998','1997','1996','1995'
				],
				screen:'筛选',
				screen_list:[
					'批发','求购','询价'
				],
				car_brand:'',
				car_year:'',
				car_screen:'',
				keyword:'',
				user_call:0,
				call_num:0,
				cityPickerValueDefault: [0, 0, 1],
				pickerText: '全国',
				prov : '',
				city : '',
				area : '',
			}
		},
		onLoad() {
			let that = this;
			this.loadData();
		},
		onShow() {
			let is_publish = uni.getStorageSync('circle_edit');
			if (is_publish){
				uni.removeStorageSync('circle_edit');
				this.loadData();
			}
		},
		methods: {
			setRule(e) {
				let that = this;
				let index = e.currentTarget.dataset.index;
				that.flowList[index].tick = !that.flowList[index].tick
			},
			loadData() {
				let that = this;
				let param = {
					page:that.page,
					brand_name:that.car_brand,
					car_year:that.car_year,
					car_screen:that.car_screen,
					keyword:that.keyword,
				};
				that.Net._get('auth/team/dynamic', param, res => {
					if (res.code == 1) {
						that.info = res.data.data;
						if (that.info.length == 0){
							that.empty_show = 1;
						}
					}
				});
			},
			
			onChange(e) {
			    this.year = this.year_list[e.detail.value]+'款';
				this.car_year = this.year_list[e.detail.value];
				this.page = 1;
				this.loadData();
			},
			onChangeScreen(e){
				this.screen = this.screen_list[e.detail.value];
				this.car_screen = this.screen_list[e.detail.value];
				this.page = 1;
				this.loadData();
			},
			search(){
				if (this.keyword == '') {
					this.Msg.Fail('请输入搜索关键字');
					return '';
				}
				this.page = 1;
				this.loadData();
			},
			
			openPreviewImage(e,index) {
				let that = this;
				let img_ = e;
				uni.previewImage({
					current: index, // 当前显示图片索引
					urls: img_,
					loop:true
				});
			},
			del_car(id){
				let that = this;
				uni.showModal({
				    title: '确认提示',
				    content: '是否确认删除',
				    success:(res) => {
				        if (res.cancel){
				            return false;
				        }
						uni.showLoading({
							title: '删除中'
						});
						that.Net._post('auth/team/del_circle', {id:id}, res => {
							if (res.code == 1) {
								that.Msg.Success('删除成功', res => {
									uni.hideLoading();
									that.page == 1;
									this.loadData();
								});
							}
						});
				    }
				});
			},
			openAddres() {
				this.cityPickerValueDefault = [0, 0, 1];
				this.$refs.simpleAddress.open();
			},
			onConfirm(e) {
				let that = this;
				let pickerText = e.label.split('-');
				that.prov = pickerText[0];
				that.city = pickerText[1];
				that.area = pickerText[2];
				if (pickerText[1] == '市辖区'){
					that.city = pickerText[0];
					that.area = pickerText[1];
				}
				that.pickerText = that.city;
				that.pageinit();
			},
			pageinit() {
				this.page = 1;
				this.info = [];
				this.loadData();
			},
			onLongPress(e) {
			    // 在这里可以执行复制操作
			    uni.setClipboardData({
			        data: e,
			        success: () => {
						console.log('复制成功');
						// 可以弹窗提示复制成功
						uni.showToast({
							title: '复制成功',
							icon: 'success'
						});
						},
			        fail: () => {
						console.log('复制失败');
			        }
			    });
			},
			backPage() {
				uni.navigateBack({});
			},
			gotopage(e) {
				let url = e.currentTarget.dataset.url;
				uni.navigateTo({
					url: url
				});
			},

		},
		onPageScroll: function(Object) {
			//console.log(Object.scrollTop); //实时获取到滚动的值
			if (Object.scrollTop > 28) {
				this.scrrol = true;
				/* #ifdef APP-PLUS */
				/* #endif */
			} else if (Object.scrollTop < 28) {
				this.scrrol = false;
				/* #ifdef APP-PLUS */
				/* #endif */
			}
		},
		onPullDownRefresh() {
			//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
			let that = this;
			setTimeout(function() {
				uni.stopPullDownRefresh();
				that.page = 1;
				that.loadData();
			}, 500);
		},
		onReachBottom() {
			var that = this;
			that.page++;
			let param = {
				page:that.page,
				brand_name:that.car_brand,
				car_year:that.car_year,
				car_screen:that.car_screen,
				keyword:that.keyword,
			};
			that.Net._get('auth/team/dynamic', param, res => {
				if (res.code == 1) {
					if (res.data.data == '') {
						uni.showToast({
							title: '没有更多内容了',
							duration: 2000,
							icon: 'none'
						});
						that.empty_show = 1;
					} else {
						that.info = that.info.concat(res.data.data); //将数据拼接在一起
					}
				} else if (res.code == 0) {
					that.Msg.Success(res.msg, res => {});
				}
			});
		},
	}
</script>

<style>
	page{
		padding-bottom: 0 !important;
	}
	.header {
		/* background-color: transparent !important; */
	}

	.header .text {
		/* background-color: transparent !important; */
		color: #fff !important;
	}

	.scrrolHeader02 {
		background-color: #fff !important;
	}

	.clear_box02 {
		width: 100%;
		height: calc(12vw + var(--status-bar-height));
	}
	.off_but{
		padding: 1vw 2vw 1vw 2vw;
		border-radius: 3vw;
		/* background-color: #FF9800; */
		display: flex;
		align-items: center;
		margin-left: 1vw;
		border: 1px solid #777777;
	}
	.search_maxbox {
		width: 100%;
		padding: 3vw 4%;
		position: fixed;
		left: 0;
		top: calc(13.4vw + var(--status-bar-height));
		z-index: 98;
	}

	.search_box {
		width: 100%;
		border-radius: 2vw;
		border: 1px solid #FC5D20;
		display: flex;
		align-items: center;
		height: 12vw;
		padding-left: 2vw;
	}

	.search_box .city_box {
		display: flex;
		align-items: center;
		padding: 0 2vw;
		border-right: 1px solid #E8E8F0;
		margin-right: 2vw;
	}

	.search_box .city_box .city {
		font-size: 3.8vw;
		color: #979AA9;
		margin-right: 1vw;
	}

	.search_box .city_box .arrow {
		font-size: 3vw;
		color: #979AA9;
	}

	.search_box .search {
		flex: 1;
		display: flex;
		align-items: center;
	}

	.search_box .search .icon {
		font-size: 4vw;
		color: #979AA9;
		margin-right: 2vw;
	}

	.search_box .search input {
		flex: 1;
		font-size: 3.5vw;
		color: #333;
	}

	.search_box .search .menu {
		font-size: 4vw;
		height: 9vw;
		width: 16vw;
		color: #fff;
		background-color: #FE811E;
		border-radius: 2vw;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 1.5vw;
	}

	.rule_box {
		width: 100%;
		height: 10vw;
		background-color: #FEF6EB;
		display: flex;
		align-items: center;
		padding: 0 4%;
		margin-top: 5px;
	}

	.rule_box .icon {
		font-size: 5vw;
		color: #FF6B23;
		margin-right: 2vw;
	}

	.rule_box .value {
		flex: 1;
		font-size: 3.5vw;
		color: #FF6B23;
		margin-right: 2vw;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}

	.rule_box .add {
		font-size: 3.5vw;
		color: #FF6B23;
		margin-right: 1vw;
	}

	.rule_box .arrow {
		font-size: 4vw;
		color: #FF6B23;
	}

	.nav {
		width: 92%;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 5vw 0;
	}

	.nav .menu {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.nav .menu .text {
		font-size: 3.5vw;
		color: #333;
		margin-right: 1vw;
		font-weight: bold;
	}

	.nav .menu .icon {
		font-size: 3vw;
		color: #E6E6E6;
	}

	.tips_box {
		width: 92%;
		margin: 0 auto;
		background-color: #f96e38;
		border-radius: 3vw;
		padding: 1.5vw;
		position: relative;
	}

	.tips_box .tips_bg {
		width: 10vw;
		position: absolute;
		right: 4%;
		top: 1.5vw;
	}

	.tips_box .tips_bg image {
		width: 100%;
	}

	.tips_box .title {
		width: 100%;
		display: flex;
		align-items: center;
	}

	.tips_box .title .i {
		font-size: 4vw;
		color: #fff;
		margin-right: 1vw;
	}

	.tips_box .title .t {
		font-size: 3.5vw;
		color: #fff;
	}

	.tips_box .text_box {
		width: 100%;
		margin-top: 1.5vw;
		background-color: #fff;
		border-radius: 3vw;
		display: flex;
		align-items: center;
		padding: 4vw;
	}

	.tips_box .text_box .tips {
		font-size: 3.5vw;
		color: #333;
		flex: 1;
	}

	.tips_box .text_box .menu {
		font-size: 3.5vw;
		color: #fff;
		width: 20vw;
		height: 7vw;
		border-radius: 7vw;
		background: linear-gradient(to right, #FE9229, #FF4F27);
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.scroll_box{
		width: 100%;
		height: 57vh;
	}

	.circle_list {
		width: 100%;
		background-color: #fff;
		padding: 4%;
		border-bottom: 1px solid #F7F8FC;
	}

	.circle_list .circle_box {
		width: 100%;
		display: flex;
		align-items: center;
	}

	.circle_list .circle_box .circle_img {
		width: 12vw;
		height: 12vw;
		margin-right: 2vw;
	}

	.circle_list .circle_box .circle_img image {
		width: 100%;
		height: 100%;
		border-radius: 2vw;
	}

	.circle_list .circle_box .circle_text {
		flex: 1;
	}

	.circle_list .circle_box .circle_text .name {
		font-size: 4vw;
		color: #333;
		font-weight: bold;
	}

	.circle_list .circle_box .circle_text .text {
		font-size: 3.5vw;
		color: #999999;
		margin-top: 1vw;
	}

	.circle_list .circle_box .circle_text .text span {
		color: #FF6A23;
	}

	.circle_list .circle_box .orientation {
		font-size: 3.6vw;
		color: #999999;
	}

	.circle_list .circle_value {
		margin-top: 2vw;
		display: flex;
	}

	.circle_list .circle_value .type {
		width: 10vw;
		height: 5vw;
		font-size: 3vw;
		color: #fff;
		background-color: #FF5227;
		margin-right: 1vw;
		border-radius: 1vw;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.circle_list .circle_value .value {
		font-size: 3.7vw;
		color: #333;
		font-weight: bold;
	}

	.circle_list .circle_picture {
		width: 100%;
		margin-top: 2vw;
		display: flex;

	}

	.circle_list .circle_picture .picture {
		flex: 1;
		height: 30vw;
		margin-left: 1vw;
	}

	.circle_list .circle_picture .picture:nth-child(1) {
		margin-left: 0;
	}

	.circle_list .circle_picture .picture image {
		width: 100%;
		height: 100%;
		border-radius: 2vw;
	}
	
	.circle_list .circle_picture .picture_2 {
		flex: 1;
		height: 30vw;
		margin-left: 1vw;
		background-color: rgba(0, 0, 0, 0.5);
	}
	
	.circle_list .circle_picture .picture_2:nth-child(1) {
		margin-left: 0;
	}
	
	.circle_list .circle_picture .picture_2 image {
		width: 100%;
		height: 100%;
		border-radius: 2vw;
		opacity: 0.5;
	}

	.circle_list .circle_other {
		width: 100%;
		margin-top: 3vw;
		display: flex;
		align-items: center;
	}

	.circle_list .circle_other .time {
		font-size: 3.8vw;
		color: #999;
	}

	.circle_list .circle_other .icon_box {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: flex-end
	}

	.circle_list .circle_other .icon_box .icon {
		width: 16vw;
		display: flex;
		align-items: center;
	}

	.circle_list .circle_other .icon_box .icon .i {
		font-size: 4vw;
		color: #333;
		margin-right: 1vw;
	}

	.circle_list .circle_other .icon_box .icon .t {
		font-size: 3.6vw;
		color: #333;
		font-weight: bold;
	}
	
	.circle_other .icon_box .icon .c {
		font-size: 3.6vw;
		color: #FF9800;
		font-weight: bold;
	}
	.publish_box{
		width: 24vw;
		height: 11vw;
		border-radius: 11vw;
		padding: 0 1.5vw;
		background: linear-gradient(to right, #FE9229, #FF4F27);
		display: flex;
		align-items: center;
		position: fixed;
		right: calc(50% - 12vw);
		bottom: 10vh;
		z-index: 98;
	}
	
	.publish_box .icon{
		width: 8vw;
		height: 8vw;
		border-radius: 50%;
		background-color: #fff;
		font-size: 4vw;
		color: #FE9129;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.publish_box .text{
		flex: 1;
		font-size: 3.5vw;
		color: #fff;
		font-weight: bold;
		text-align: center;
	}
	
	/* .image-list {
	  display: flex;
	  flex-wrap: wrap;
	}
	.image {
	  width: 100px;
	  height: 100px;
	  margin: 3px;
	} */
	.count {
		position: relative;
		top: -60%; /* Adjust this value based on the size of your images */
		left: 50%; /* Adjust this value based on the size of your images */
		color: white;
		/* background-color: rgba(0, 0, 0, 0.5); */
		/* border-radius: 50%; */
		/* width: 50px;
		height: 50px;
		line-height: 50px; */
		/* text-align: center; */
		font-size: 20px;
	}
	
	.swiper_box03 {
		width: 100%;
		height: 5.5vw;
	}
	.content_text {
		flex: 1;
		font-size: 3.5vw;
		color: #FF6B23;
		margin-right: 2vw;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
		
		
	}
</style>